<template>
	<breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
	<!-- wrapper -->
	<div class="module-common-wrapped">
		<div class="module-commmon-content">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			    <el-tab-pane label="公告管理" name="first">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-commmon-header">
								<div class="search-wrapped">
									<el-select v-model="department" placeholder="请选择部门" @change="getListByDepartment">
										<el-option v-for="item in departmentData"  :key="item" :label="item" :value="item" />
									</el-select>
									<el-radio-group v-model="radio2"  @change="getMessageListByLevel">
									    <el-radio label="一般">一般</el-radio>
										<el-radio label="重要">重要</el-radio>
										<el-radio label="必要">必要</el-radio>
									</el-radio-group>
								</div>
								<div class="button-wrapped">
									 <el-button type="primary" plain @click="getCompanyFirstPageList">全部公告</el-button>
									 <el-button type="primary" @click="createMessage(1)">发布公告</el-button>
								</div>
							</div> 
							<!-- 表格部分 -->
							<div class="module-commmon-table">
								<el-table :data="companyTableData" border style="width: 100%">
									<el-table-column type="index" width="50"></el-table-column>
									<el-table-column prop="message_title" label="公告主题" width="320" />
									<el-table-column prop="message_category" label="类别" />
									<el-table-column prop="message_publish_department" label="发布部门" />
									<el-table-column prop="message_publish_name" label="发布人" />
									<el-table-column prop="message_receipt_object" label="接收对象" />
									<el-table-column prop="message_level" label="公告等级" />
									<el-table-column prop="message_publish_time" label="发布时间" width="200">
										<template #default="{row}">
											<div>{{row.message_publish_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="message_update_time" label="最新编辑时间" width="200">
										<template #default="{row}">
											<div>{{row.message_update_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="message_click_number" label="阅读人数" />
									<el-table-column label="操作" width="200" fixed="right">
										<template #default="{row}">
											<div>
												<el-button type="success" @click="editMessage(row)">编辑</el-button>
												<el-button type="danger" @click="deleteMessage(row.id)">删除</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination
							    :page-size="1"
								:pager-count="7" 
								:current-page="paginationData.companyCurrentPage"
								:page-count="paginationData.companyPageCount"
								@current-change="companyCurrentChange"
							    layout="prev, pager, next"
							    :total="paginationData.companyTotal"
							  />
						</div>
					</div>
				</el-tab-pane>
			    <el-tab-pane label="系统消息" name="second">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-commmon-header">
								<div class="search-wrapped"></div>
								
								<div class="button-wrapped">
									 <el-button type="primary" @click="createMessage(2)">发布系统消息</el-button>
								</div>
							</div>
							<!-- 表格部分 -->
							<div class="module-commmon-table">
								<el-table :data="systemTableData" border style="width: 100%">
									<el-table-column type="index" width="50"></el-table-column>
									<el-table-column prop="message_title" label="消息主题" />
									<el-table-column prop="message_publish_name" label="发布者" />
									<el-table-column prop="message_click_number" label="阅读人数" />
									<el-table-column prop="message_publish_time" label="发布时间" width="200">
										<template #default="{row}">
											<div>{{row.message_publish_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>


									<el-table-column label="操作" width="200" fixed="right">
										<template #default="{row}">
											<div>
												<el-button type="success" @click="editSystemMessage(row)">编辑</el-button>
												<el-button type="danger" @click="deleteMessage(row.id)">删除</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination
							    :page-size="1"
								:pager-count="7" 
								:current-page="paginationData.systemCurrentPage"
								:page-count="paginationData.systemCount"
								@current-change="systemCurrentChange"
							    layout="prev, pager, next"
							    :total="paginationData.systemTotal"
							  />
						</div>
					</div>
				</el-tab-pane>
			  </el-tabs>
		</div>
	</div>
	<createEdit ref="cre" @success="changeTwoPageList"></createEdit>
	<deleteM ref="deletem" @success="changeTwoPageList"></deleteM>
</template>

<script lang="ts" setup>
	import createEdit from '../components/create_edit.vue'
	import deleteM from '../components/delete.vue'
	import {ref,reactive} from 'vue'
	import breadCrumb from '@/components/bread_crumb.vue'
	import { Search } from '@element-plus/icons-vue'
	import { bus } from "@/utils/mitt.js"
	import type { TabsPaneContext } from 'element-plus'
	import {companyMessageList,systemMessageList,searchMessageBydepartment,searchMessageByLevel,
	getCompanyMessageLength,returnCompanyListData,returnSystemListData,getSystemMessageLength} from '@/api/message.js'
	import {getDepartment} from '@/api/setting.js'
	
	// 面包屑
	const breadcrumb=ref()
	// 面包屑参数
	const item=ref({
		first:'消息管理',
		second:'消息列表'
	})
	const activeName = ref('first')

	const companyTableData=ref([])
	const systemTableData=ref([])
	const handleClick = (tab: TabsPaneContext) => {
		
	}
	// const getMessageList=async()=>{
	// 	companyTableData.value=await companyMessageList()
	// }
	// getMessageList()
	
	// 获取系统消息列表
	// const getSystemList=async()=>{
	// 	systemTableData.value=await systemMessageList()
	// }
	// getSystemList()
	
	// const getTwoList=async()=>{
	// 	getMessageList()
	// 	getSystemList()
	// }
	
	const department=ref()
	// 部门数据
	const departmentData=ref([])
	const getdepartment=async()=>{
		departmentData.value=await getDepartment()
	}
	getdepartment()
	
	//------------------------------------------------------------------
	// 分页数据
	const paginationData=reactive({
		// 公司公告总数
		companyTotal: 1,
		// 公司公告列表总页数
		companyPageCount: 1,
		// 公司公告列表当前所处页数
		companyCurrentPage: 1,
		// 系统消息总数
		systemTotal: 1,
		// 系统消息总页数
		systemCount: 1,
		// 系统消息当前所处页数
		systemCurrentPage: 1,
	})
	// 获取公司公告列表的页数
	const getCompanyListLength =async()=>{
		const res=await getCompanyMessageLength()
		// 公司公告总数
		paginationData.companyTotal=res.length
		// 计算总页数每页10条数据
		paginationData.companyPageCount=Math.ceil(res.length/10)
	}
	getCompanyListLength ()
	
	// 获取系统消息列表的页数
	const getSystemListLength = async () => {
		const res = await getSystemMessageLength()
		paginationData.systemTotal = res.length
		paginationData.systemCount = Math.ceil(res.length / 10)
	}
	getSystemListLength()
	
	// 默认获取公司公告列表第一页的数据
	const getCompanyFirstPageList = async () => {
		companyTableData.value = await returnCompanyListData(1)
	}
	getCompanyFirstPageList()
	
	// 默认获取系统消息第一页的数据
	const getSystemFirstPageList = async () => {
		systemTableData.value = await returnSystemListData(1)
	}
	getSystemFirstPageList()
	
	// 更新公司公告列表及系统消息列表的第一页数据
	const changeTwoPageList =()=>{
		getCompanyFirstPageList()
		getSystemFirstPageList()
	}
	
	// 公司公告列表监听换页
	const companyCurrentChange = async (value: number) => {
		paginationData.companyCurrentPage = value
		companyTableData.value = await returnCompanyListData(paginationData.companyCurrentPage)
	}
	
	// 系统消息列表监听换页
	const systemCurrentChange = async (value: number) => {
		paginationData.systemCurrentPage = value
		systemTableData.value = await returnSystemListData(paginationData.systemCurrentPage)
	}
	
	
	// 根据部门进行筛选
	const getListByDepartment=async()=>{
		companyTableData.value=await searchMessageBydepartment(department.value)
	}
	
	// 根据消息等级进行筛选
	const radio2=ref()
	const getMessageListByLevel = async () =>{
		companyTableData.value = await searchMessageByLevel(radio2.value)
	}
	
	
	// 发布公告/编辑公告
	const cre=ref()
	
	const createMessage=(id:number)=>{
		bus.emit('createMessage',id)
		cre.value.open()
	}
	
	const editMessage=(row:any)=>{
		// const content={
		// 	row:row,
		// 	name:'编辑公告'
		// }
		bus.emit('editMessage',row)
		cre.value.open()
	}
	
	const editSystemMessage = (row: any) => {
		bus.emit('editSystemMessage', row)
		cre.value.open()
	}

	
	const deletem=ref()
	// 删除公司公告/系统消息
	const deleteMessage=(id:number)=>{
		bus.emit('deleteMessageId',id)
		deletem.value.open()
	}
</script>

<style lang="scss" scoped>
	
	.el-radio-group{
		margin-left: 20px;
	}
	.el-select{
		width: 200px;
	}
	:deep(.el-table .cell){
		font-weight: 400;
	}
</style>